<template>
  <div class="gameBox py-4" v-if="games.length != 0">
    <div class="item relative" v-for="(item, i) in games" :key="i">
      <div class="hover-img">
        <div
          @click="
            clickGame(item.link_url);
            addRecent(item);
          "
          class="game_loading_div"
          :style="'background-image:url(' + oss(item.img_url) + ')'"
        ></div>
        <div class="mb absolute w-full rounded h-[30%] top-[-2px] left-0" />
        <div
          class="absolute top-2 right-2 cursor-pointer star"
          @click="clickStar(item)"
        >
          <svg-icon
            v-if="item.is_collect == 0"
            class="text-[28px] text-white star1"
            name="星星1"
          />
          <svg-icon v-else class="text-[28px] text-white star2" name="星星2" />
        </div>
      </div>

      <div class="flex items-center mt-2">
        <div class="greenpoint w-[6px] h-[6px] rounded-full bg-[#1fff20]"></div>
        <div class="flex text-white text-xs ml-2">
          {{ item.play_num }}
          <span class="ml-1 text-[#b1bad3]">{{
            $t("page.casino.inplay")
          }}</span>
        </div>
      </div>
    </div>
  </div>
  <el-empty
    v-else
    :image-size="200"
    :description="$t('layer.activity.noData')"
  />
</template>
<script setup>
import {
  createApp,
  ref,
  computed,
  onMounted,
  onBeforeUnmount,
  nextTick,
  getCurrentInstance,
  watch
} from "vue";
import { gameCollect, gameCollectList } from "../../api/casion";
import { mainAct } from "../../store/activeda";
import { useRouter, useRoute } from "vue-router";
import { eventBus } from "@/utils/eventBus";
import { gameDetail } from "@/store/game";
import { oss } from "@/utils/util.oss";
const gameDetails = gameDetail();
const router = useRouter();
const route = useRoute();
const main2 = mainAct();

const props = defineProps({
  games: {
    type: Array,
    default: []
  }
});

const addRecent = game => {
  if (!game || !game.id) {
    return;
  }

  console.log("添加的游戏:", game);

  // 检查并初始化 recentList
  if (!Array.isArray(main2.recentList)) {
    console.error("recentList 不是一个有效的数组");
    return;
  }

  // 如果游戏已存在，先移除它，再将其放到最前面
  const existingIndex = main2.recentList.findIndex(item => item.id === game.id);
  if (existingIndex !== -1) {
    main2.recentList.splice(existingIndex, 1);
  }

  // 将新游戏放到最前面
  main2.recentList.unshift(game);

  // 更新当前游戏
  main2.currentGame = game;

  // 去重：根据游戏ID去重，保证唯一性
  main2.recentList = main2.recentList.filter(
    (value, index, self) => index === self.findIndex(t => t.id === value.id)
  );

  // 保证列表长度不超过35条
  if (main2.recentList.length > 35) {
    main2.recentList.splice(35);
  }

  console.log("本地缓存 => 近期游戏");
  console.log(main2.recentList);
};

const clickStar = async e => {
  console.log(e.code);
  let data = {
    game_code: e.code
  };
  let res = await gameCollect(data);
  console.log(res);
  if (res.errno == 0) {
    //请求收藏夹列表
    // getList();
    if (e.is_collect == 1) {
      e.is_collect = 0;
    } else {
      e.is_collect = 1;
    }
  }
};

const clickGame = url => {
  // main2.isLoading = true;
  if (!main2.isLogin) {
    if (main2._isMobile) {
      router.push("/login");
    } else {
      main2.showLoginLayer("no");
    }
    return;
  }
  //跳转游戏
  const matchLoginGame = url.match(/login_game/g);
  const loginGame = matchLoginGame ? matchLoginGame[0] : "";
  const matchGameCode = url.match(/game_code=[^&]*/);
  const gameCode = matchGameCode ? matchGameCode[0].split("=")[1] : "";
  //跳转外链
  const matchLink = url.match(/link/g);
  const link = matchLink ? matchLink[0] : "";
  const matchUrl = url.match(/url=[^&]*/);
  const linkurl = matchUrl ? matchUrl[0].split("=")[1] : "";
  if (loginGame != "") {
    gameDetails.gameLogin(gameCode, router);
  }
  if (link != "") {
    console.log(link);
    console.log(linkurl);
    window.open(linkurl, "_blank");
  }
};
</script>
<style scoped lang="less">
@media (max-width: 600px) {
  .gameBox {
    grid-gap: 10px 5px !important;
    grid-template-columns: repeat(3, 1fr) !important;

    .item {
      width: 28vw !important;
      max-width: unset;
      min-width: unset;
    }
    .game_loading_div {
      width: 28vw !important;
      height: 36vw !important;
    }
    .star {
      display: block !important;
    }
    .mb {
      opacity: 1 !important;
    }
  }
}
.gameBox {
  background-color: #1a2c38;
  display: grid;
  grid-gap: 2rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  .hover-img {
    will-change: transform;
    transition: 0.3s;
  }
  .item .game_loading_div {
    width: 157px;
    color: #fff;
    height: 216px;
    cursor: pointer;
    background-color: #213743;
    text-align: center;
    line-height: 216px;
    border-radius: 4px;
  }
  .star {
    display: none;
  }
  .mb {
    opacity: 0;
    transition-duration: 1s;
    transition-property: opacity;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 0.3) 25%,
      rgba(0, 0, 0, 0.5) 60%,
      rgba(48, 48, 48, 0.9) 100%
    );
  }

  .item:hover .hover-img {
    transform: translateY(-4%);
    .star {
      display: block;
      z-index: 12;
    }
    .mb {
      opacity: 1;
      transition-duration: 1s;
      transition-property: opacity;
      z-index: 11;
    }
  }
}
</style>
